<template>
  <div>
    <div class="app-container" v-if="!drawMapFlag">
      <div class="el-page el-main el-position">
        <div class="search-box" id="search-box">
          <div class="search-card">
            <div class="input-box">
              <el-radio v-model="layoutType" label="table">表格布局</el-radio>
              <el-radio v-model="layoutType" label="tabulation">平面布局</el-radio>
              <div class="searchCard" v-if="this.$status == '0'">
                <span class="searchText">农场名称：</span>
                <el-select class="shadowInput" @change="changeFram" size="mini" clearable v-model="form.farmCode"
                  placeholder="请选择农场名称">
                  <el-option v-for="item in SelectList.farmList" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="searchCard" v-if="this.$status == '0' || this.$status == '1'">
                <span class="searchText">生产队名称：</span>
                <el-select class="shadowInput" size="mini" clearable v-model="form.teamCode" placeholder="请选择生产队名称">
                  <el-option v-for="item in SelectList.teamList" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="searchCard">
                <span class="searchText">粮食类型：</span>
                <el-select class="shadowInput" size="mini" clearable v-model="form.cropType" placeholder="请选择粮食类型">
                  <el-option v-for="item in SelectList.cropinfoList" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="searchCard">
                <span class="searchText">仓库类型：</span>
                <el-select class="shadowInput" size="mini" clearable v-model="form.warehouseType" placeholder="请选择仓库类型">
                  <el-option v-for="item in SelectList.warehouseTypeList" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="button-box">
              <el-button class="search" @click="getList">搜索</el-button>
              <el-button class="clear" @click="handleReset">清除</el-button>
            </div>
            <svg-icon class="svg-icon arrow" id="arrow" icon-class="rightArrow" @click="toggleDropdown" />
          </div>
          <div class="input-box">
            <div class="searchCard">
              <span class="searchText">额定仓容：</span>
              <el-input class="shadowInput" v-model="form.rated" clearable size="mini" placeholder="请输入额定仓容"></el-input>
            </div>
            <div class="searchCard">
              <span class="searchText">仓号：</span>
              <el-input class="shadowInput" v-model="form.warehouseNumber" clearable size="mini"
                placeholder="请输入仓号"></el-input>
            </div>
            <div class="searchCard">
              <span class="searchText">填报时间：</span>
              <el-date-picker v-model="timeList" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期" size="mini"
                @change="handleFormData">
              </el-date-picker>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="operate-box">
          <div class="button-box">
            <el-button v-if="hasIdentifier('Warehouse.add')" class="addButton" type="primary" icon="el-icon-plus"
              size="mini" @click="handleShowAddDialog">新增</el-button>
            <el-popconfirm v-if="hasIdentifier('Warehouse.delete')" style="margin:0 10px;" confirm-button-text='确定'
              cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定删除所勾选的数据吗？" @confirm="handleDel">
              <el-button slot="reference" type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
            </el-popconfirm>
            <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleSelectAll">全选</el-button>
            <el-button v-if="hasIdentifier('Warehouse.import')" type="warning" plain icon="el-icon-download" size="mini"
              @click="handleExport">导出</el-button>
          </div>
          <div>
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <el-button :disabled="layoutType == 'table' ? false : true" class="circleButtom" size="mini"
                icon="el-icon-refresh" circle @click="getList"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
              <el-button :disabled="layoutType == 'table' ? false : true" class="circleButtom" size="mini"
                icon="el-icon-menu" circle @click="handleShowTransfer"></el-button>
            </el-tooltip>
          </div>
        </div>
        <div class="table-box" v-if="layoutType == 'table'">
          <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
            :delList.sync="delList">
          </TableCom>
        </div>
        <div class="page-box" v-if="layoutType == 'table'">
          <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
            @handleCurrent="handleCurrent"></PageCom>
        </div>
        <div v-else class="tabulationBox">
          <template v-if="tableData.length">
            <TabulationCard class="cardPage" v-for=" item, index  in  tableData " :key="index" :form="item">
            </TabulationCard>
          </template>
          <el-empty v-else description="暂无数据" style="width: 100%;"></el-empty>
        </div>
        <!-- 显隐列 -->
        <TransferCom :showDialog.sync="showTransferDialog" :list.sync="tableHead"></TransferCom>
      </div>
    </div>
    <DrawMap v-else @handleBack="handleBack" :drawCenter="drawCenter"></DrawMap>
    <AddPopu ref="addPopu" :showDialog.sync="showAddDialog" @handleRefresh="getList"></AddPopu>
    <movePopu ref="movePopu" :showDialog.sync="showmoveDialog" :reshrch="handleRefreshAdd"></movePopu>
  </div>

</template>

<script>
import { tableApi, warehouseDeleteApi, stampGetApiAA, importApi, stampGetStamp } from '@/api/cageMange'
import { unitSelectApi } from '@/api/dashhboard'
import { selectApi, cropinfoSelectApi } from '@/api/select'
import { fileExport } from '@/utils/methods'
import TableCom from '@/components/TableCom'
import PageCom from '@/components/PageCom'
import TransferCom from '@/components/TransferCom'
import TabulationCard from './components/TabulationCard.vue'
import DrawMap from './components/DrawMap.vue'
import AddPopu from './dialog/AddPopu.vue'
import movePopu from './dialog/movePopu.vue'
import { getInfo } from '../../utils/auth'
import { mapGetters } from 'vuex';
export default {
  components: {
    TableCom,
    PageCom,
    TransferCom,
    TabulationCard,
    DrawMap,
    AddPopu,
    movePopu
  },
  watch: {
    showAddDialog(newA) {
      if (!newA) {
        this.pageData.current = 1
        this.getList()
      }
    }
  },
  computed: {
    ...mapGetters(['hasIdentifier']), // 映射 getters
  },
  data() {
    return {
      form: {
        warehouseType: '',
        farmCode: this.$farmCode || '',
        teamCode: this.$teamCode || '',
        cropType: '',
        warehouseNumber: '',
        rated: '',
        startDate: '',
        endDate: ''
      },
      layoutType: 'table',
      pageData: {
        current: 1,
        size: 10
      },
      total: 0,
      tableHead: [{
        title: '仓库类型',
        prop: 'warehouseType'
      }, {
        title: '仓号',
        prop: 'warehouseNumber'
      }, {
        title: '垛号',
        prop: 'stampId'
      }, {
        title: '额定仓容(公斤)',
        prop: 'rated'
      }, {
        title: '当前仓容(公斤)',
        prop: 'current'
      }, {
        title: '种类',
        prop: 'cropType'
      }, {
        title: '负责人姓名',
        prop: 'personName'
      }, {
        title: '农场名称',
        prop: 'farmName'
      }, {
        title: '生产队名称',
        prop: 'teamName'
      }],
      tableData: [],
      drawCenter: [],
      tableOperate: [{
        title: '修改',
        handle: (row) => {
          if (this.$refs.addPopu.tableOperate.length == 1) {
            this.$refs.addPopu.tableOperate.push({
              title: '移垛',
              handle: (row2) => {
                this.showmoveDialog = true;
                this.$refs.movePopu.FatherId = row2;
                this.$refs.movePopu.fatherObj = row2;
              },
              flag: (row) => {
                if (!row.isDeleted) {
                  return true
                } else {
                  return false
                }
              }
            })
          }

          // this.$refs.addPopu.carList = this.carList
          this.getAddList(row)
          if (row.teamCode) {

            selectApi({ type: row.farmCode }).then((res) => {
              this.$refs.addPopu.carList = {
                storageList: this.SelectList.warehouseTypeList,
                farmList: this.SelectList.farmList,
                teamList: res.data.dictItemList
              }
            })
            selectApi({ type: 'farm_type' }).then((res) => {
              this.$refs.addPopu.carList = {
                ...this.$refs.addPopu.carList,
                farmList: res.data.dictItemList
              }
            })
          } else {
            this.$refs.addPopu.carList = {
              storageList: this.SelectList.warehouseTypeList,
              farmList: this.SelectList.farmList
            }
          }

          this.$refs.addPopu.ruleForm = {
            ...row,
            warehouseType: this.SelectList.warehouseTypeList.filter((e) => { return e.label == row.warehouseType })[0].value
          }
          this.showAddDialog = true
        },
        flag: () => {
          return this.hasIdentifier("Warehouse.update")
        }
      }, {
        title: '定位',
        handle: (row) => {
          this.drawMapFlag = true;
          this.drawCenter = [row.lon * 1, row.lat * 1]
        },
        flag: () => {
          return true
        }
      }],
      SelectList: {
        farmList: [],
        warehouseTypeList: [],
        cropinfoList: [],
        teamList: []
      },
      isDropdownVisible: false,
      timeList: [],
      showAddDialog: false,
      delList: [],
      showTransferDialog: false,
      drawMapFlag: false,
      showmoveDialog: false,
      userInfoObj: JSON.parse(getInfo())
      // companyCode
      // parentCode
    }
  },
  methods: {
    toggleButton(name) {
      toggleButton(name)
    },
    // 刷新表格
    handleRefreshAdd(data) {
      this.getAddList(data)
    },
    // 刷新表格
    handleRefresh() {
      this.pageData.current = 1
      this.getList()
    },
    changeFram(e) {
      selectApi({ type: e }).then((res) => {
        this.SelectList.teamList = res.data.dictItemList;
      })
    },
    // 显示隐藏下拉框
    toggleDropdown() {
      const arrow = document.getElementById('arrow');
      const search = document.getElementById('search-box');
      if (!this.isDropdownVisible) {
        arrow.classList.add('down');
        search.classList.add('search-box-height');
      } else {
        arrow.classList.remove('down');
        search.classList.remove('search-box-height');
      }
      this.isDropdownVisible = !this.isDropdownVisible;
    },
    // 获取下拉框
    async handleGetSelect() {
      // let res = await selectApi({ type: 'car_type' })
      const list = ['warehouse_type'];
      if (this.$status == '0') {
        list.push("farm_type")
      }
      const ProList = list.map((item) => {
        return selectApi({ type: item })
      })
      if (this.$status == '1') {
        ProList.push(selectApi({ type: this.$farmCode }))
      }
      ProList.push(cropinfoSelectApi())
      Promise.all(ProList).then((res) => {
        if (this.$status == '0') {
          this.SelectList.cropinfoList = res[2].data
          // this.SelectList.farmList = res[1].data.dictItemList
          this.SelectList.warehouseTypeList = res[0].data.dictItemList
        } else if (this.$status == '1') {
          this.SelectList.teamList = res[1].data.dictItemList
          this.SelectList.cropinfoList = res[2].data
          this.SelectList.warehouseTypeList = res[0].data.dictItemList
        } else {
          this.SelectList.cropinfoList = res[1].data
          this.SelectList.warehouseTypeList = res[0].data.dictItemList
        }

      })
      if (this.$status == '0') {
        unitSelectApi().then(res => {
          this.SelectList.farmList = []
          this.SelectList.farmList = res.data
        })
      }
    },
    // 搜索框时间
    handleFormData() {
      if (this.timeList.length) {
        this.form.startTime = this.timeList[0]
        this.form.endTime = this.timeList[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    // 全选取消全选
    handleSelectAll() {
      this.$refs.tableCom.toggleSelection(this.tableData)
    },
    // 重置
    handleReset() {
      this.form = {
        warehouseType: '',
        farmCode: this.$farmCode || '',
        teamCode: this.$teamCode || '',
        cropType: '',
        warehouseNumber: '',
        rated: '',
        startDate: '',
        endDate: ''
      }
      this.timeList = []
    },
    // 获取表格
    async getList() {
      const { data } = await tableApi(this.form, this.pageData)
      this.total = data.total
      this.tableData = data.records
    },
    // 获取add表格
    async getAddList(row) {
      stampGetApiAA({ warehouseId: row.id }).then((res) => {
        this.$refs.addPopu.tableData = res.data
      })
    },
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
    handleShowAddDialog() {
      this.drawMapFlag = true
    },
    handleBack() {
      this.drawMapFlag = false;
      this.getList()
    },
    // 删除
    async handleDel() {
      await warehouseDeleteApi(this.delList)
      this.getList()
    },
    // 导出
    async handleExport() {
      let res = await importApi({ ...this.form, ids: this.delList })
      fileExport(res, '仓库管理')
    },
    // 显隐列弹框
    handleShowTransfer() {
      this.showTransferDialog = true
    },
  },
  mounted() {
    this.handleGetSelect()
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.el-page {
  width: 100%;
  height: calc(100vh - 70px);

  .search-box {
    height: 40px;
    transition: height 0.3s ease;
    overflow: hidden;

    .search-card {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .arrow {
        cursor: pointer;
        display: inline-block;
        position: absolute;
        right: -100px;
        font-size: 30px;
        transition: transform 0.3s ease;
      }

      .arrow.down {
        transform: rotate(90deg);
      }
    }

    .input-box {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: height 0.2s ease-in-out;
    }
  }

  .search-box-height {
    height: 90px;
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tabulationBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: 620px;
    overflow-y: auto;

    .cardPage {
      width: 30%;
      height: 280px;
      margin: 20px;
    }
  }
}

.left {
  // transform: translateX(-100%);
}

.right {
  // transform: translateX(100%);
}

.right-enter {
  transform: translateX(100%);
}

.right-enter-to {
  transform: translateX(0);
}

.right-leave {
  transform: translateX(0);
}

.right-leave-to {
  transform: translateX(100%);
}

.right-enter-active,
.right-leave-active {
  transition: transform 0.5s;
}

.left-enter {
  transform: translateX(-100%);
}

.left-enter-to {
  transform: translateX(0);
}

.left-leave {
  transform: translateX(0);
}

.left-leave-to {
  transform: translateX(-100%);
}

.left-enter-active,
.left-leave-active {
  transition: transform 0.5s;
}
</style>
